<template>
	<view class="content">
		<view class="detail">
			<view class="table">
				<view class="left">
					<uni-table border stripe emptyText="暂无更多数据">
						<!-- 表头行 -->
						<uni-tr style="background: #EFEFEF;box-sizing:border-box;">
							<uni-th align="center" style="height: 60rpx;">接单/完成时间</uni-th>
							<uni-th align="center">订单数量</uni-th>
							<uni-th align="ceter">用户名称</uni-th>
							<uni-th align="ceter">状态</uni-th>
							<uni-th align="ceter">订单编号</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr style="box-sizing:border-box;">
							<uni-td align="ceter">
								<view class="date" style="height: 84rpx;">
									<view class="item">
										<i></i>
										<text>2021/01/12 22:00</text>
									</view>
									<view class="item">
										<i style="background: #D40000;"></i>
										<text>2021/01/12 22:00</text>
									</view>
								</view>
							</uni-td>
							<uni-td align="ceter">1</uni-td>
							<uni-td align="ceter">xxxxxxx</uni-td>
							<uni-td align="ceter">
								<text class="status">已结</text>
							</uni-td>
							<uni-td align="ceter">200120012001</uni-td>
						</uni-tr>
					</uni-table>
				</view>
				<view class="right">
					<uni-table border stripe emptyText="暂无更多数据" style="width: 160rpx;">
						<!-- 表头行 -->
						<uni-tr style="background: #EFEFEF;box-sizing:border-box;" :width='70'>
							<uni-th align="center" style="height: 60rpx;" :width='70'>佣金</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr style="box-sizing:border-box;" :width='70'>
							<uni-td align="ceter" :width='70'>
								<view class="price" style="height: 84rpx;">¥1111.00</view>
							</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
			<view class="total">
				<view class="title">总计</view>
				<view class="text">订单：12个</view>
				<view class="text">佣金：¥1111.00</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
	}
	.detail {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
	
		.table {
			position: relative;
	
			.left {
				padding-right: 130rpx;
	
				.date {
					.item {
						display: flex;
						align-items: center;
	
						i {
							width: 10rpx;
							height: 10rpx;
							background: #00AD26;
							border-radius: 50%;
							margin-right: 6rpx;
						}
	
						text {
							font-size: 20rpx;
							color: #333333;
							line-height: 28rpx;
						}
					}
				}
	
				.status {
					font-size: 22rpx;
					color: #929292;
					line-height: 30rpx;
				}
			}
	
			.right {
				position: absolute;
				right: 0;
				top: 0;
	
				.price {
					font-size: 22rpx;
					font-weight: 600;
					color: #EF5233;
					line-height: 84rpx;
				}
			}
		}
	
		.total {
			display: flex;
			height: 84rpx;
	
			.title {
				width: 30%;
				height: 100%;
				box-sizing: border-box;
				background: rgba(255, 0, 0, 0.1);
				border: 1rpx solid #E10404;
				text-align: center;
				line-height: 82rpx;
				font-size: 34rpx;
				color: #FD3530;
			}
	
			.text {
				width: 35%;
				height: 100%;
				box-sizing: border-box;
				border: 1rpx solid #E10404;
				text-align: center;
				line-height: 82rpx;
				font-size: 22rpx;
				color: #FD3530;
			}
		}
	
	}
</style>
